@extends('layouts.layouts')
@section('title')
    <title>赛普健身社区后台管理</title>
    <style>
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>
    
@endsection

@section('content')
    <!-- Demo page code -->
<script src="/js/upload.js" type="text/javascript"></script>
    <div class="content">
        <div class="header">
            <ul class="breadcrumb">
                <li><a href="/types">文章类别管理</a> </li>
                <li class="active">添加类别</li>
            </ul>
        </div>
        <div class="main-content">
            <ul class="nav nav-tabs nav-tabs-course">
                <li role="presentation" class="course_add active"><a href="javascript:void(0);">添加类别</a></li>
            </ul>

            <form class="form-horizontal" id="courseFormInfo" action="/type/insert" method="post">
                {{csrf_field()}}
                <div class="course_class row">
                    <div class="col-md-8">
                        <br>
                        <div class="tab-content">
                            <div class="form-group">
                                <label for="" class="col-sm-3 control-label">类别名称</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="" name="title" placeholder="类别名称">
                                </div>
                            </div>
                            <div class="form-group">
                              <label for="inputPassword3" class="col-sm-3 control-label">类别封面图(大小300kb)</label>
                                    <div class="col-sm-9">
                                        <a href="javascript:;" class="file">上传封面图(554X221)
                                            <input type="file" class="upload_img cover" name="coverUrl" placeholder="封面图">
                                        </a>
                                        <img src="" id="cover_img" style="width:120px;max-height:120px;">
                                        <input type="hidden" class="cover_url" name="cover_url" />
                                        <span id="error"></span>
                                    </div>
                            </div>
                            <div class="form-group">
                                <label for="" class="col-sm-3 control-label">seo标题</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="" name="seo_title" placeholder="seo标题">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="" class="col-sm-3 control-label">seo描述</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="" name="seo_description" placeholder="seo描述">
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label for="inputPassword3" class="col-sm-3 control-label">状态</label>
                                <div class="col-sm-5">
                                  <select name="state" id="DropDownTimezone" class="form-control">
                                      <option value="1" selected="true">显示</option>
                                      <option value="0">禁用</option>
                                  </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPassword3" class="col-sm-3 control-label">是否首页显示</label>
                                <div class="col-sm-5">
                                  <select name="is_index" id="DropDownTimezone" class="form-control">
                                      <option value="1">显示</option>
                                      <option value="0" selected="true">禁用</option>
                                  </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <p>
                        <button type="submit" class="btn btn-primary btn-lg col-md-offset-5" style="width:120px;background:#286090;color:#fff;">提交</button>
                    </p>
                </div>
            </form>
        </div>
    </div>
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript">
        $("[rel=tooltip]").tooltip();
        $(function() {
            $('.demo-cancel-click').click(function(){return false;});
        });

    </script>
	<script type="text/javascript">
	$(".uploadfiley").click(function(){
			$("input[type='file']").trigger('click');
	});
    function showPreview(source) {
      var file = source.files[0];
      if(window.FileReader) {
          var fr = new FileReader();
          console.log(fr);
          var portrait = document.getElementById('portrait');
          fr.onloadend = function(e) {
            portrait.src = e.target.result;
          };
          fr.readAsDataURL(file);
          portrait.style.display = 'block';
      }
    }
    var imgUrl = '{{env('IMG_URL')}}';
    $(document).ready(function(){
      $(".upload_img").UploadImg({
            url : '/course/fileUpload',
            quality : '0.8', //压缩率，默认值为0.8
            // 如果quality是1 宽和高都未设定 则上传原图
            mixsize : '3000000',
            //type : 'image/png,image/jpg,image/jpeg,image/pjpeg,image/gif,image/bmp,image/x-png',
            before : function(blob,className){
            //var className = '#'+className;
            //$(className).attr('src',blob);
            },
            error : function(res){
                $('#img').attr('src','');
                $('#error').html(res);
            },
            success : function(url,className){
                console.log(url);
                $('#cover_img').attr('src', imgUrl + url);
                $('.cover_url').val( url);
            }
        });       
    });
</script>

@endsection
